<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/web/common.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<select id="province">
		<option value="">请选择</option>
		<c:forEach var="o" items="${provinces}">
			<option ${provinceId eq o.id ? "selected":""} value="${o.id}">${o.label}</option>
		</c:forEach>
	</select>
	<select id="city">
		<option value="">请选择</option>
		<c:forEach var="o" items="${cityList}">
			<option ${cityId eq o.id ? "selected":""} value="${o.id}">${o.label}</option>
		</c:forEach>
	</select>
	<select id="country">
		<option value="">请选择</option>
		<c:forEach var="o" items="${countryList}">
			<option ${countryId eq o.id ? "selected":""} value="${o.id}">${o.label}</option>
		</c:forEach>
	</select>
	<script type="text/javascript" src="${ctx}/assets/js/jquery.js"></script>
	<script type="text/javascript">
		$('#province').change(function() {
			var provinceId = $(this).val();
			if (provinceId != '') {
				var url = "${ctx}/getChildRegion";
				$.post(url, {"parid":provinceId}, function(data) {
					var $city = $('#city');
					$city.html('<option value="">请选择</option>');
					for (var i in data) {
						$city.append("<option value='" + data[i].id + "'>" + data[i].label + "</option>");
					}
				});	
			} else {
				$('#city').html('<option value="">请选择</option>');
				$('#country').html('<option value="">请选择</option>');
			}
		});
		
		$('#city').change(function() {
			var cityId = $(this).val();
			if (cityId != '') {
				$.post('${ctx}/getChildRegion', {"parid":cityId}, function(data) {
					var $country = $('#country');
					$country.html('<option value="">请选择</option>');
					for (var i in data) {
						$country.append("<option value='" + data[i].id + "'>" + data[i].label + "</option>");
					}
				});
			} else {
				$('#country').html('<option value="">请选择</option>');
			}
		});
	</script>
</body>
</html>